<template>
    <div style="width: 100%; height: 100%; padding: 0 10px" class="map-css">
        <div id="container" style="width: 100%; height: 100%"></div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {getEquipmentMap} from '@/utils/api';
window._AMapSecurityConfig = {
    securityJsCode: '25287497e8a6f7a6318f2c9ad03fe4ff', //填写你的安全密钥
};
export default {
    name: 'equipmentMap',
    data() {
        return {
            map: null, // 当前显示的地图区域对象
            AMap: null, // 拿到的所有的地图的对象
            colorMap: [
                'rgb(255, 0, 13)',
                'rgb(255, 126, 36)',
                'rgb(194, 187, 0)',
                'rgb(26, 255, 0)',
                'rgb(0, 84, 194)',
            ], // 颜色
            markers: [], // 标记
            // mapData: [], // 地图上的标记点
            // backList: [], // 后端给的所有的数据

            mapData: [
                {
                    scene_name: '测试',
                    color: 'rgb(255, 0, 13)',
                    lng: 113.991682, // 经度
                    lat: 29.249937, // 纬度
                    // img:''
                },
            ], // 假数据，初始化是空数组
        };
    },
    async mounted() {},
    async activated() {
        let res = await getEquipmentMap({
            scene_id: '',
            name: '',
            paged: 1,
            pageSize: 5000,
        }); //获取设备信息
        if (res.status == 2 && res.data && res.data.data) {
            this.mapData = res.data.data.map(item => {
                if (item.lonLat) {
                    const [gcjLat, gcjLon] = this.wgs84ToGcj02(
                        Number(item.lonLat.split(',')[1]),
                        Number(item.lonLat.split(',')[0])
                    );
                    item.lng = gcjLon;
                    item.lat = gcjLat;
                }
                return item;
            });
        } else {
            this.mapData = [];
        }
        //DOM初始化完成进行地图初始化
        await this.initMap();
    },
    methods: {
        initMap() {
            let load = AMapLoader.load({
                key: '36ee10ec4ccd5cea768c040433499406', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.Marker', 'AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
                .then(AMap => {
                    this.AMap = AMap;
                    this.map = new AMap.Map('container', {
                        //设置地图容器id
                        viewMode: '3D', //是否为3D地图模式
                        zoom: 5, //初始化地图级别
                        center: [105.602725, 37.076636], //初始化地图中心点位置
                        features: ['road', 'point'],
                    });
                    this.markPoints();
                })
                .catch(e => {
                    console.log(e);
                });
        },
        markPoints() {
            this.mapData.forEach(item => {
                // 创建一个 Marker 实例：
                const marker = new AMap.Marker({
                    position: new AMap.LngLat(item.lng, item.lat), // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
                    // 使用 label 属性显示名称
                    label: {
                        content: item.name,
                        // offset: new window.AMap.Pixel(20, -20), // 调整标签位置
                        style: {
                            color: 'black',
                            backgroundColor: 'white',
                            border: 0,
                            padding: '2px',
                        },
                    },
                });
                // 将创建的点标记添加到已有的地图实例：
                this.map.add(marker);
                this.map.setFitView();
                //给标记点添加事件
                marker.on('click', e => {
                    this.setInfoWindows(e, item);
                });
            });
        },
        //显示的弹出框组件
        setInfoWindows(e, item) {
            console.log(item);
            // 信息窗体的内容
            let content = [
                // e.pos[0],e.pos[1],
                `<div class = 'frame-css' style='\'padding:0px' 0px = '' 4px; \'=''>
          <div class = 'frame-title'><b>设备显示</b></div>`,
                `单位名:<span class="frame-nav"> ${item.scene_name}</span>`,
                `设备号:<span  class="frame-nav"> ${item.device_code}</span>`,
                `</div>`,
                // `<img src=${item.img} alt="" style="width: 100px;height: 100px">`
            ];
            // 创建 infoWindow 实例
            let infoWindow = new AMap.InfoWindow({
                content: content.join('<br>'), //传入 dom 对象，或者 html 字符串
            });
            // 打开信息窗体
            let dd = this.map.getCenter();
            // dd.pos = [e.pos[0], e.pos[1]]
            dd.lat = item.lat;
            dd.lng = item.lng;
            infoWindow.open(this.map, dd);
        },
        wgs84ToGcj02(lat, lon) {
            const pi = 3.1415926535897932384626;
            const a = 6378245.0; // 长半轴
            const ee = 0.00669342162296594323; // 偏心率平方

            if (this.outOfChina(lat, lon)) {
                return [lat, lon]; // 不在中国范围内
            }

            const dLat = this.transformLat(lon - 105.0, lat - 35.0, pi);
            const dLon = this.transformLon(lon - 105.0, lat - 35.0, pi);
            const radLat = (lat / 180.0) * pi;

            const magic = Math.sin(radLat);
            const magic2 = 1 - ee * magic * magic;
            const sqrtMagic = Math.sqrt(magic2);

            const dLatAdjusted = (dLat * 180.0) / (((a * (1 - ee)) / (magic2 * sqrtMagic)) * pi);
            const dLonAdjusted = (dLon * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * pi);

            const mgLat = lat + dLatAdjusted;
            const mgLon = lon + dLonAdjusted;

            return [mgLat, mgLon];
        },

        outOfChina(lat, lon) {
            return !(lat > 0 && lat < 50 && lon > 73 && lon < 135);
        },

        transformLat(lon, lat, pi) {
            let ret =
                -100.0 + 2.0 * lon + 3.0 * lat + 0.2 * lat * lat + 0.1 * lon * lat + 0.2 * Math.sqrt(Math.abs(lon));
            ret += ((20.0 * Math.sin(6.0 * lon * pi) + 20.0 * Math.sin(2.0 * lon * pi)) * 2.0) / 3.0;
            ret += ((20.0 * Math.sin(lat * pi) + 40.0 * Math.sin((lat / 3.0) * pi)) * 2.0) / 3.0;
            ret += ((160.0 * Math.sin((lat / 12.0) * pi) + 320.0 * Math.sin((lat * pi) / 30.0)) * 2.0) / 3.0;
            return ret;
        },

        transformLon(lon, lat, pi) {
            let ret = 300.0 + lon + 2.0 * lat + 0.1 * lon * lon + 0.1 * lon * lat + 0.1 * Math.sqrt(Math.abs(lon));
            ret += ((20.0 * Math.sin(6.0 * lon * pi) + 20.0 * Math.sin(2.0 * lon * pi)) * 2.0) / 3.0;
            ret += ((20.0 * Math.sin(lon * pi) + 40.0 * Math.sin((lon / 3.0) * pi)) * 2.0) / 3.0;
            ret += ((150.0 * Math.sin((lon / 12.0) * pi) + 300.0 * Math.sin((lon / 30.0) * pi)) * 2.0) / 3.0;
            return ret;
        },
    },
};
</script>

<style scoped>
.map-css >>> .amap-info-content {
    background-image: url('@/assets/img/dialog1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #ffffff;
    width: 200px;
    height: 130px;
}

.map-css >>> .frame-css {
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 21px;
}

.map-css >>> .frame-title {
    margin-bottom: 8px;
}

.map-css >>> .frame-nav {
    font-weight: 400;
    line-height: 30px;
    color: #1bf455;
}
</style>
